import QtQuick 2.2

Rectangle {
    id: root;
    width: 300;
    height: 300;

    MouseArea {
        id: rootMouse;
        anchors.fill: root;
        onClicked: {
            console.log(rect1.opacity)
            root.state = "show";
        }
    }

    Rectangle {
        id: rect1;
        width: 100;
        height: 100;
        color: "blue";
        anchors.verticalCenter: root.verticalCenter;
        anchors.horizontalCenter: root.horizontalCenter;
        opacity: 0;

        MouseArea {
            id: mouseArea;
            anchors.fill: parent;
            onClicked: {
                console.log(parent.opacity)
            }
        }
    }

    states: [
        State
        {
            name: "hide";
            PropertyChanges
            {
                target: rect1;
//                restoreEntryValues: false;
                opacity: 0;
            }
        },
        State
        {
            name: "show";
//            when: rootMouse.pressed;
            PropertyChanges
            {
                target: rect1;
//                restoreEntryValues: false;
                opacity: 1;
//                visible: true;
            }
        }
    ]
    state: "hide";
    transitions: [
        Transition {
            from: "hide";
            to: "show";
            NumberAnimation {
                target: rect1;
                property: "opacity";
                duration: 3000;
            }
        }
    ]
}

